<template>
  <div class="tieba-container">
    <header class="tieba-header">
      <h1>学校小喇叭</h1>
      <div class="search-box">
        <input type="text" placeholder="搜索帖子...">
        <button>搜索</button>
      </div>
    </header>

    <main class="tieba-main">
      <section class="post-list">
        <!-- 发布新帖子表单 -->
        <div class="post-form">
          <h2>发布新帖子</h2>
          <form @submit.prevent="submitPost">
            <div class="form-group">
              <label for="postTitle">标题:</label>
              <input type="text" id="postTitle" v-model="newPost.tittle" placeholder="请输入帖子标题" required>
            </div>
            <div class="form-group">
              <label for="postContent">内容:</label>
              <textarea
                  id="postContent"
                  v-model="newPost.content"
                  placeholder="请输入帖子内容"
                  required
                  rows="6"
                  @input="checkContentLength"
                  :maxlength="maxContentLength"
              ></textarea>
              <div v-if="newPost.content.length > 0" class="content-counter">
                {{ newPost.content.length }}/1000
              </div>
            </div>
            <button type="submit" class="submit-btn">发布帖子</button>
          </form>
        </div>

        <!-- 帖子列表 -->
        <div v-for="post in listData" :key="post.id" class="post-card">
          <div class="post-header">
            <h2 class="post-title">{{ post.tittle }}</h2>
            <p class="post-meta">
              <span>作者: {{ post.username }}</span>
              <span>发布时间: {{ post.postTime }}</span>
            </p>
          </div>

          <div class="post-content">
            <div v-if="!post.expanded && post.content.length > 100">
              {{ post.content.substring(0, 100) + '...' }}
              <span @click="showAllText(post)" class="expand-link">展开</span>
            </div>
            <div v-else>
              {{ post.content }}
              <span v-if="post.content.length > 100" @click="showAllText(post)" class="expand-link">收起</span>
            </div>
          </div>

          <div class="post-actions">
            <button @click="likePost(post)" class="like-btn">
              <i class="icon-like">👍</i>
              <span>{{ post.likes }}</span>
            </button>
            <button @click.prevent="showCommentBox(post)" class="comment-btn">
              <i class="icon-comment">💬</i>
              <span>{{ post.length }}条评论</span>
            </button>
          </div>

          <div v-if="post.showComments" class="comments-section">
            <div v-for="comment in post.comments" :key="comment.id" class="comment-item">
              <div class="comment-header">
                <span class="comment-author">{{ comment.username }}</span>
                <span class="comment-time">{{ comment.commentTime }}</span>
              </div>
              <div class="comment-content">
                <div>
                  <span>{{ comment.content }}</span>
                </div>
              </div>
            </div>

            <div class="add-comment">
              <input
                  type="text"
                  v-model="post.newComment"
                  placeholder="发表评论..."
                  @keyup.enter="addComment(post)"
                  maxlength="50"
              >
              <button @click="addComment(post)">发布</button>
            </div>
          </div>
        </div>
        <!-- 分页组件 -->
        <div style="margin-bottom: 80px">
          <!-- 分页组件 -->
          <el-pagination
              @current-change="currentChange"
              @size-change="sizeChange"
              :page-size="pageInfo.pageSize"
              :current-page="pageInfo.pageNum"
              background
              layout="prev, sizes,pager, next"
              :page-sizes="[8, 16, 24, 32, 40, 48]"
              :total="total">
          </el-pagination>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
import utils from "@/utils/utils";

export default {
  data() {
    return {
      expanded: true,
      username: utils.getUserInfo().username,
      listData: [],
      searchForm: {},
      newPost: {
        tittle: '',
        content: '',
        postLike: 0,
      },
      currentPosts: [],
      total: 0,
      pageInfo: {
        pageNum: 1,
        pageSize: 8
      },
      maxContentLength: 1000
    };
  },
  created() {
    this.getPageList();
  },
  methods: {
    getPageList() {
      let data = Object.assign(this.searchForm, this.pageInfo);
      this.$axios.get("/posts/page", {
        params: data
      }).then(res => {
        this.listData = res.data.list;
        this.listData.forEach(post => {
          post.showComments = false;
          post.newComment = '';
          post.expanded = false;
          post.comments.forEach(comment => {
            comment.expanded = false;
          });
        });
        this.total = res.data.total;
      });
    },
    currentChange(e) {
      this.pageInfo.pageNum = e;
      this.getPageList();
    },
    sizeChange(e) {
      this.pageInfo.pageSize = e;
      this.getPageList();
    },
    likePost(post) {
      post.likes += 1;
    },
    showCommentBox(post) {
      post.showComments = !post.showComments;
      this.$forceUpdate();
    },
    showAllText(post) {
      post.expanded = !post.expanded;
      this.$forceUpdate();
    },
    addComment(post) {
      if (post.newComment.trim() === '') {
        alert('评论内容不能为空！');
        return;
      }

      const newComment = {
        postId: post.id,
        username: this.username,
        commentTime: new Date().toLocaleString(),
        content: post.newComment,
        length: post.length + 1
      };
      post.comments.push(newComment);
      post.newComment = '';
      this.$axios.post("/comments/add", newComment).then(res => {
        if (res.code === 200) {
          post.newComment = '';
          post.length++;
        } else {
          alert('评论失败！');
        }
      }).catch(err => {
        console.error('评论失败:', err);
      });
    },
    submitPost() {
      if (this.newPost.tittle.trim() === '' || this.newPost.content.trim() === '') {
        alert('标题和内容不能为空！');
        return;
      }

      const newPost = {
        tittle: this.newPost.tittle.trim(),
        username: this.username,
        postTime: new Date().toLocaleString(),
        content: this.newPost.content.trim(),
        postLike: 0,
        showComments: false,
      };
      this.$axios.post("/posts/add", newPost).then(res => {
        if (res.code === 200) {
          this.$message({
            type: "success"
          });
          this.getPageList();
        }
      });
      this.newPost.tittle = '';
      this.newPost.content = '';
    },
    checkContentLength() {
      if (this.newPost.content.length > this.maxContentLength) {
        this.newPost.content = this.newPost.content.substring(0, this.maxContentLength);
        alert('内容字数已达到上限1000字！');
      }
    }
  }
};
</script>

<style scoped>
.tieba-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;
}

.tieba-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff3567, #35ff67, #3567ff, #ff3567);
  opacity: 0.3;
  animation: glow 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes glow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.tieba-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.tieba-header h1 {
  margin: 0;
  font-size: 28px;
  color: #333;
}

.search-box {
  display: flex;
}

.search-box input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  width: 300px;
}

.search-box button {
  padding: 8px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.tieba-main {
  display: flex;
  gap: 20px;
}

.post-list {
  flex: 1;
}

.post-form {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  padding: 20px;
}

.post-form h2 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.submit-btn {
  padding: 8px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.post-card {
  background-color:  #fafafa;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.post-header {
  margin-bottom: 15px;
}

.post-title {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #333;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 14px;
}

.post-content {
  margin-bottom: 15px;
  line-height: 1.7;
  color: #303133;
}

.post-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.like-btn, .comment-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 14px;
}

.like-btn:hover, .comment-btn:hover {
  color: #42b983;
}

.comments-section {
  margin-top: 15px;
}

.comment-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #999;
  font-size: 14px;
}

.comment-content {
  color: #555;
  line-height: 1.6;
}

.add-comment {
  display: flex;
  margin-top: 15px;
}

.add-comment input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

.add-comment button {
  padding: 8px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.content-counter {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.expand-link {
  color: #42b983;
  cursor: pointer;
  text-decoration: underline;
}
</style>